import Taro, { useDidShow } from "@tarojs/taro";
import React, { useState, useRef } from "react";
import { View, Image } from "@tarojs/components";
import { AtButton, AtBadge } from "taro-ui";
import { getPrivateChat, countUnread } from "./api";
import def from "../../assets/default.jpg";
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/badge.scss";
import css from "./index.module.less";

export default function Index() {
  const initialState = {
    avatar:
      "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132",
    concernedNumber: 0,
    created: "",
    email: "",
    fansNumber: 0,
    id: 0,
    status: 0,
    tel: "",
    title: null,
    username: "微信用户",
    uuid: "",
  };
  const [userList, setUserList] = useState([]);
  const [user, setUser] = useState(initialState);
  const [count, setCount] = useState(0); // 统计未读系统消息
  useDidShow(() => {
    Taro.getStorage({
      key: "userInfo",
      success: function (res) {
        const userInfo = res.data;
        setUser(userInfo);
        getPrivateChat(userInfo.id).then((res) => {
          if (res.code === 200) {
            setUserList(res.data);
          }
        });
        countUnread(userInfo.id).then((res) => {
          if (res.code === 200) {
            setCount(res.data);
          }
        });
      },
    });
  });

  const toChat = (id, uuid) => {
    Taro.navigateTo({ url: `chat/index?otherId=${id}&otherUuid=${uuid}` });
  };
  const checkMsg = () => {
    Taro.navigateTo({ url: `list/index?id=${user.id}` });
  };

  const [isLoad, setIsLoad] = useState(false);
  const onLoad = () => {
    setIsLoad(true);
  }

  const onError = () => {
    setIsLoad(false);
  }
  return (
    <React.Fragment>
      <View className={css.content}>
        <View className={css.header} style={{ margin: "1rem" }}>
          <AtBadge value={count === 0 ? "" : count}>
            <AtButton onClick={checkMsg}>系统消息</AtButton>
          </AtBadge>
        </View>
        <View className={css.chat}>
          {userList.map((user) => {

            return (
              <View
                key={user.id}
                className={css.info}
                onClick={() => toChat(user.id, user.uuid)}
              >
                <Image src={isLoad? user.avatar : def} onLoad={onLoad} onError={onError} />

                <View className={css.title}>
                  <View className={css.list}>
                    <View>{user.username}</View>
                    <View className={css.msg}>
                    <View>{user.lastMessage}</View>
                    <View>
                      {user.lastTime.split("T")[0] +
                        " " +
                        user.lastTime.split("T")[1]}
                    </View>
                    </View>
                  </View>
                  {user.unReadCount === 0 ?"" : <View className={css.unread}>{user.unReadCount}</View>}
                </View>
              </View>
            );
          })}
        </View>
      </View>
    </React.Fragment>
  );
}
